<template>
    <el-main>
        <el-card>
            <!-- 查询条件 -->
        <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
            <el-form-item>
                <el-input v-model="searchModel.tablet" placeholder="请输入门牌号查询"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search(pageNo,pageSize)">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
                <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据 -->
        <el-table :data="roomList" border stripe>
            <el-table-column
             type="index"
             width="50"></el-table-column>
             <template v-for="item in tableProp">
                <el-table-column
                 v-if="item.prop !== 'isFree'"
                 :prop="item.prop" :label="item.label"
                 :formatter="item.formatter">
                
                </el-table-column>
                <el-table-column
                    v-if="item.prop ==='isFree'"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                >
          <template slot-scope="scope">
            <template v-if="item.prop==='isFree'">
              <el-tag :type="scope.row.isFree ?'success':'danger'">
                {{ scope.row.isFree?'空闲':'暂无位置' }}
              </el-tag>
            </template>
          </template>
        </el-table-column>
            </template>
            <el-table-column align="center" label="操作" width="300px">
                <template slot-scope="scope">
                    <el-button icon="el-icon-thumb" type="info" size="mini" @click="checkIn(scope.row)">入住</el-button>
                    <el-button icon="el-icon-edit" type="primary" size="mini" @click="updateRoomById(scope.row)">编辑</el-button>
                    <el-button icon="el-icon-delete" type="danger" size="mini" @click="deleteRoomById(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页工具栏 -->
        <el-pagination @size-change="assignSizeChange" @current-change="assignCurrentChange"
                    :current-page.sync="pageNo" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" background>
            </el-pagination>
        <!-- 添加和编辑弹框 -->
        <system-dialog :title="roomDialog.title"
             :visible="roomDialog.visible" :width="roomDialog.width"
             :height="roomDialog.height" @onClose="onClose"
             @onConfirm="onConfirm">
                <div slot="content">
                    <el-form :model="roomInfo" ref="roomInfoForm"
                        :rules="rules" label-width="80px">
                        <el-form-item v-if="roomDialog.title !== '入住'" label="楼幢" prop="dormitoryId" style="height: 50px;margin-top: 20px;">
                            <el-select v-model="roomInfo.dormitoryId" clearable placeholder="请选择楼幢号" style="width:200px">
                            <el-option
                            v-for="item in dormitoryList"
                            :key="item.id"
                            :label="item.building"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item v-if="roomDialog.title !== '入住'" label="门牌号" prop="tablet" style="height: 50px;margin-top: 20px;">
                            <el-input v-model="roomInfo.tablet" style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item v-if="roomDialog.title !== '入住'" label="床位" prop="bedNumber" style="height: 50px;margin-top: 20px;">
                            <el-input v-model="roomInfo.bedNumber" style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item v-if="roomDialog.title == '入住'" label="入住人" prop="checkUsername" style="height: 50px;margin-top: 20px;">
                            <el-select v-model="roomInfo.checkUsername" filterable  clearable placeholder="请选择用户" style="width:200px"
                            @change="getUser(roomInfo.checkUsername)">
                            <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.nickName"
                            :value="item.username"
                            >
                            <span style="float: left">{{ item.nickName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.username }}</span>
                            </el-option>
                        </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </system-dialog>
    </el-card>
</el-main>
    
</template>

<script>
import userApi from '@/api/user'
import roomApi from '@/api/room'
import dormitoryApi from '@/api/dormitory'
import SystemDialog from '@/components/system/SystemDialog.vue'

export default{
    name:'room',
    components:{
        SystemDialog
    },
    data() {
        return {
            userInfo:{},
            userList:[],
            dormitoryList:[],
            searchModel:{
                building:null,
                pageNo:1,
                pageSize:10,
            },
            roomInfo:{
                id:null,
                dormitoryId:null,
                tablet:null,
                bedNumber:null,
                checkUsername:null,
            },
            roomDialog:{
                title:'',
                visible:false,
                width:350,
                height:240,
            },
            roomList:[],
            tableProp:[
                { prop:'dormitoryId', label:'楼幢',
                formatter:value => {
                        const building = this.dormitoryList.find(dormitory => dormitory.id === value.dormitoryId)
                        return building !== undefined ? building.building : '-'
                    }},
                { prop:'tablet', label:'门牌号'},
                { prop:'bedNumber', label:'床号'},
                { prop:'isFree', label:'是否空闲'},
                { prop:'checkUsername', label:'入住人',
                formatter: value => {
                        const findUser = this.userList.find(user => user.username === value.checkUsername)
                        return findUser !== undefined ? findUser.nickName : '-'
                    }},
                { prop:'createTime', label:'创建时间'},
                { prop:'updateTime', label:'修改时间'},
            ],
            rules:{dormitoryId: [{ required: true, trigger: "change", message: "请选择楼幢号" }],
            tablet: [{ required: true, trigger: "blur", message: "请输入门牌号" }],
            bedNumber: [{ required: true, trigger: "blur", message: "请输入床位" }],},
            pageNo:1,
            pageSize:10,
            total:0,
        }
    },
    methods: {
        async getUserList(){
            let res = await userApi.getUserAll()
            console.log(res)
            if(res.success){
                this.userList = res.data
            }
        },
        async getDormitoryList(){
            let res = await dormitoryApi.getDormitoryList({pageSize:500})
            if(res.success){
                this.dormitoryList = res.data.records
            }
        },
        async search(pageNo=1,pageSize=10){
            this.searchModel.pageNo = pageNo
            this.searchModel.pageSize = pageSize
            let res = await roomApi.getRoomList(this.searchModel)
            if(res.success){
                this.roomList = res.data.records
                this.total = res.data.total
            }
        },
        resetValue(){
            this.searchModel = {}
            this.search()
        },
        openAddWindow(){
            this.$resetForm('roomInfoForm',this.roomInfo)
            this.roomDialog.title = '添加房间'
            this.roomDialog.visible = true
        },
        onClose(){
            this.roomDialog.visible = false
        },
        onConfirm(){
            this.$refs.roomInfoForm.validate(async (valid) => {
                if(valid){
                    let res = null
                    if(this.roomDialog.title == '添加房间'){
                        res = await roomApi.addRoom(this.roomInfo)
                    }else if(this.roomDialog.title == '修改房间信息'){
                        res = await roomApi.updateRoomById(this.roomInfo)
                    }else if(this.roomDialog.title == '入住'){
                        this.userInfo.roomId = this.roomInfo.id
                        await userApi.updateUser(this.userInfo)
                        this.roomInfo.isFree = false
                        res = await roomApi.updateRoomById(this.roomInfo)
                    }
                    if(res.success){
                        this.$message.success(res.message)
                        this.search()
                        this.roomDialog.visible = false
                    }else{
                        this.$message.error(res.message)
                    }
                }
            })
        },
        updateRoomById(row){
            this.roomDialog.title = '修改房间信息'
            this.roomDialog.visible = true
            this.$objCopy(row,this.roomInfo)
        },
        async deleteRoomById(row){
            let confirm = await this.$myconfirm("确定删除吗？")
            if(confirm){
                let res = await roomApi.deleteRoomById({id:row.id})
                if(res.success){
                    this.search()
                    this.$message.success(res.message)
                }else{
                    this.$message.error(res.message)
                }
            }
        },
        assignSizeChange(size) {
            this.pageSize = size; //将每页显示的数量交给成员变量
            this.search(this.pageNo, size);
        },
        assignCurrentChange(page) {
            this.pageNo = page;
            //调用查询方法
            this.search(page, this.pageSize);
        },
        checkIn(row){
            this.roomDialog.title = '入住'
            this.$objCopy(row,this.roomInfo)
            this.roomDialog.visible = true
        },
        async getUser(username){
            let res = await userApi.getUserList({username:username})
            this.userInfo = res.data.records[0]
        }
    },
    created() {
        this.search()
        this.getUserList()
        this.getDormitoryList()
    },
}

</script>

<style lang="scss" scoped>
    
</style>